<script>
import { getTreeApi } from '@/api/projectSite.js'

export default {
  data () {
    return {
      /** 默认属性 */
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf',
        disabled: 'disabled'
      },

      /** 默认选中的key */
      currentNodekey: '',

      /** 搜索关键词 */
      filterText: ''
    }
  },

  methods: {
    /** 查询 */
    onSearch () {
      // this.$refs.tissueTree.filter(this.filterText)
      this.loadNode()
    },

    /** 懒加载 */
    loadNode (node, resolve) {
      this.getProjectDeviceTreeList(resolve, node)
    },

    /** 获取列表 */
    async getProjectDeviceTreeList (resolve, node) {
      const res = await getTreeApi({ parent: node.data ? node.data.id : '', keyword: this.filterText })
      const newList = res.data.map((item) => ({
        ...item,
        leaf: !item.childNum,
        disabled: item.orgForm !== 59
      }))
      if (typeof resolve === 'function') {
        console.log(newList, 'newList')
        resolve(newList)
      }
    },

    /** 点击某一项 */
    handleNodeClick (data) {
      this.$emit('change', data)
    },

    /** 搜索过滤 */
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  }
}
</script>

<template>
  <div>
    <div class="search-box">
      <el-input placeholder="输入机构名称" v-model="filterText" clearable />
      <el-button type="primary" @click="onSearch">查询</el-button>
    </div>

    <el-tree
      ref="tissueTree"
      class="tissue-tree"
      highlight-current
      node-key="id"
      lazy
      :current-node-key="currentNodekey"
      :props="defaultProps"
      :load="loadNode"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<style scoped lang="scss">
.search-box {
  display: flex;
  padding: 0 5px;

  button {
    margin-left: 12px;
  }
}
.tissue-tree {
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
}
</style>

